<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
	<title>Our Beer - Steak House Website Template</title>
	<meta charset="utf-8">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<!--[if IE 6]>
		<link href="css/ie6.css" rel="stylesheet" type="text/css">
	<![endif]-->
	<!--[if IE 7]>
		<link href="css/ie7.css" rel="stylesheet" type="text/css">
	<![endif]-->
</head>
<body>
	<div id="background">
		<div class="page">
			<c:import url="header.jsp"/>
			<div id="body">
				<div class="content">
					<div class="body">
						<h3>BEER</h3>
						<ul class="section">
							<li class="odd">
								<h2>果汁</h2>
								<ul>
									<c:forEach begin="0" end="7" items="${products}" var="pro" varStatus="status" >
										<li>
											<h2><a href="" onmouseover="myfunction(0+${status.index})"
												   onmouseout="myfunction2(0+${status.index})">${pro.goodsName}</a></h2>
											<span>￥${pro.goodsPrice}</span>
											<p>${pro.goodsintro}</p>
											<img name="imgg" id=${pro.goodsID} src="/NewSteak_war_exploded/${pro.goodsImg}" hidden="true"
												 style="width:425px; height: 300px ;position: absolute;float: bottom ;z-index: 999"></img>
										</li>
									</c:forEach>
								</ul>
							</li>
							<li>
								<h2>葡萄酒</h2>
								<ul>
									<c:forEach begin="8" end="15" items="${products}" var="pro" varStatus="status" >
										<li>
											<h2><a href="" onmouseover="myfunction(0+${status.index})"
												   onmouseout="myfunction2(0+${status.index})">${pro.goodsName}</a></h2>
											<span>￥${pro.goodsPrice}</span>
											<p>${pro.goodsintro}</p>
											<img name="imgg" id=${pro.goodsID} src="/NewSteak_war_exploded/${pro.goodsImg}" hidden="true"
												 style="width:425px; height: 300px ;position: absolute;float: bottom ;z-index: 999"></img>
										</li>
									</c:forEach>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<c:import url="footer.jsp"/>
		</div>
	</div>
	<script src="js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		function myfunction(param){
			document.getElementsByName("imgg")[param].hidden=false;
		}
		function myfunction2(param){
			document.getElementsByName("imgg")[param].hidden=true;
		}
	</script>
</body>
</html>